<template>
  <div class="statistice-page">
    <div class="header">
      <span style="font-size: 20px;">覆盖度表统计指标</span>
      <div class="right-header">
        <Select v-model="cycleValue" style="width: 100px; margin-right: 10px;" >
          <Option v-for="(item, index) in cycleOptions" :key="index" :value="item.value">
            {{ item.label }}
          </Option>
        </Select>
        <RPButton optType="reset" text="下载" @click="clickDownload"/>
      </div>
    </div>
    <Table row-key="id" :columns="columns" :data="list1"></Table>      
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      cycleValue: '2023-Q1', // 选中周期
      cycleOptions: [ //周期
        {
          label: '2023-Q1',
          value: '2023-Q1'
        }
      ],
      columns: [ //覆盖度表统计指标
        {
          title: '任务状态',
          key: 'status',
          tree: true
        },
        {
          title: '业务单元',
          key: 'trgNode'
        },
        {
          title: '2022-H1覆盖度现状',
          key: 'rate'
        },
        {
          title: '2022覆盖度目标',
          key: 'target'
        }
      ],
      list1: [ // 覆盖度表统计指标数据
        {
          status: '大消费',
          rate: '45%',
          target: '45%',
          children: [
            {
              trgNode: '华润万家',
              rate: '45%',
              target: '45%',
            }
          ]
        }
      ]
    }
  }, 
  methods: {
    clickDownload() {

    }
  }
}
</script>

<style lang="less" scoped>
.statistice-page {
  height: 100%;
  .header {
    height: 44px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
    .right-header {
      position: absolute;
      right: 16px;
      top: 10px;
    }
  }
  
}
</style>